<template>
  <div class="header">
    <div class="headerContent">
      <router-link to="home">
        <h1 class="logo"></h1>
      </router-link>
      <ul class="top-nav">
        <router-link to="home">
          <li :class="{ active: $route.path == '/home' }">首页</li>
        </router-link>
        <router-link to="toplist">
          <li :class="{ active: $route.path == '/toplist' }">排行榜</li>
        </router-link>
        <router-link to="songlist">
          <li
            :class="{
              active:
                $route.path == '/songlist' || $route.path == '/songdetails',
            }"
            ref="songlist"
          >
            歌单
          </li>
        </router-link>
        <router-link to="mv">
          <li :class="{ active: $route.path == '/mv' }">MV</li>
        </router-link>
        <router-link to="mylist">
          <li :class="{ active: $route.path == '/mylist' }">我的音乐</li>
        </router-link>
      </ul>
      <el-input
        v-model="searchText"
        placeholder="搜索音乐、MV、歌手"
        class="search"
        @keyup.enter.native="handleSearch"
        ><i
          slot="suffix"
          class="el-input__icon el-icon-search"
          @click="handleSearch"
        ></i
      ></el-input>
      <div class="login">
        <el-dropdown @command="handleCommand" v-if="isLogin">
          <el-avatar :size="50" :src="userInfo.avatarUrl"></el-avatar>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="center">个人中心</el-dropdown-item>
            <el-dropdown-item command="level">我的等级</el-dropdown-item>
            <el-dropdown-item command="quit">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button
          type="success"
          @click="$refs.dialog.open()"
          style="background-color: #3d74f0; border: 1px solid #5851e9"
          v-else
          >登陆</el-button
        >
        <login ref="dialog" />
      </div>
    </div>
  </div>
</template>

<script>
import login from "./login.vue";
import { Message } from "element-ui";
import bus from "@utils/bus/bus";
import { logout } from "../../api/api";
import { mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "topBar",
  components: {
    login,
  },
  data() {
    return {
      searchText: "",
      isShow: true,
      userId: null,
    };
  },
  computed: {
    // ...mapGetters(["isLogin", "userInfo"]),
    ...mapGetters({
      // isLogin: 'isLogin',
      userInfo: 'userInfo'
    }),
    ...mapState({
      isLogin: 'isLogin'
    })
  },
  mounted() {
    bus.$on("keywords", (res) => {
      this.searchText = res;
    });
  },
  methods: {
    ...mapMutations(["setLogin", "setUserInfo"]),
    handleSearch() {
      if (!this.searchText) {
        Message.error({ message: "请输入关键字" });
        return;
      } else {
        this.$router.push({
          path: "/search",
          query: { keywords: this.searchText, type: 1 },
        });
      }
    },
    handleCommand(item) {
      if (item == "quit") {
        logout(this.userInfo.userId).then(() => {
          console.log(this.userInfo.userId);
          Message.success({
            message: "退出成功",
          });
          window.sessionStorage.removeItem("token");
          window.sessionStorage.removeItem("cookie");
          window.sessionStorage.removeItem("userInfo");
          window.sessionStorage.removeItem("isLogin");
          // this.setLogin(false);
          this.$store.commit('setLogin',false)
          this.setUserInfo();
          this.$forceUpdate()
        });
      } else if (item == "level") {
        this.$router.push({ path: "", query: {} });
      } else {
        this.$router.push({ path: "", query: {} });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: saturate(180%) blur(20px);
  font-family: "hmR";
  font-size: 14px;
  box-shadow: 2px 2px 10px #d9d9d978;
  position: fixed;
  top: 0;
  z-index: 99;

  // position: fixed;
  .headerContent {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo {
      width: 150px;
      height: 80px;
      background: url("../../assets/logo.png") no-repeat;
      background-size: 100%;
    }

    .top-nav {
      width: 450px;
      height: 100px;
      display: flex;
      line-height: 100px;

      li {
        width: 90px;
        line-height: 100px;
        align-items: center;
        text-align: center;
        transition: all 0.2s linear;
      }

      :hover {
        background-color: #3d74f0;
        transition: all 0.2s linear;
        color: #fff;
      }
    }

    .search {
      width: 300px;

      i {
        color: #3d74f0;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
      }
    }

    .search /deep/.el-input__inner:focus {
      border-color: #3d74f0;
      background: rgba(255, 255, 255, 0.5);
      backdrop-filter: saturate(180%) blur(20px);
    }

    .active {
      border-bottom: 2px solid #3d74f0;
    }
  }
}
</style>